<template>
  <!-- 表单 -->
  <el-form inline="true">
    <el-form-item label="用户id">
      <el-input
        v-model="params.userId"
        placeholder="请您输入要搜索的用户id"
      />
    </el-form-item>
    <el-form-item label="用户昵称">
      <el-input
        v-model="params.nickName"
        placeholder="请您输入要搜索的用户昵称"
      />
    </el-form-item>
    <el-form-item>
      <el-button
        @click="onSearch"
        plain
      >搜索</el-button>
      <el-button
        @click="onReset"
        plain
        type="info"
      >重置</el-button>
    </el-form-item>
  </el-form>
  <!-- 表格 -->
  <el-table
    height="526px"
    :data="userList"
  >
    <el-table-column
      prop="userId"
      label="用户id"
      width="180px"
    />
    <el-table-column
      prop="nickName"
      label="用户昵称"
    />
    <el-table-column
      prop="sex"
      label="用户性别"
    >
      <template #default="{ row }">
        <div
          v-if="row.sex === 1"
          style="color:#3EC8FF;"
        >男</div>
        <div
          v-if="row.sex === 2"
          style="color:#FD4C40;"
        >女</div>
      </template>
    </el-table-column>
    <el-table-column
      prop="phone"
      width="120px"
      label="手机号"
    />
    <el-table-column
      prop="email"
      width="120px"
      label="邮箱"
    />
    <el-table-column
      prop="wechat"
      width="120px"
      label="微信号"
    />
    <el-table-column
      label="学校/专业"
      width="150px"
    >
      <template #default="{ row }">
        <span class="block-span"> 学校: {{ row.schoolName }}</span><br>
        <span class="block-span"> 专业: {{ row.majorName }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="introduce"
      label="个人介绍"
    />
    <el-table-column
      prop="status"
      width="90px"
      label="用户状态"
    >
      <template #default="{ row }">
        <div v-if="row.status === USER_STATUE.ENABLE.value">
          <el-tag type="success">正常</el-tag>
        </div>
        <div v-if="row.status === USER_STATUE.DISABLE.value">
          <el-tag type="error">拉黑</el-tag>
        </div>

        <div v-if="row.status === USER_STATUE.NO_ACTIVE.value">
          <el-tag type="info">未激活</el-tag>
        </div>

      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      width="80px"
      fixed="right"
    >
      <template #default="{ row }">
        <el-button
          class="red"
          v-if="row.status === USER_STATUE.ENABLE.value"
          type="text"
          plain
          @click="onUpdateUserStatus(row, USER_STATUE.DISABLE)"
        >拉黑</el-button>
        <el-button
          v-if="row.status === USER_STATUE.DISABLE.value"
          type="text"
          plain
          @click="onUpdateUserStatus(row, USER_STATUE.ENABLE)"
        >解禁</el-button>
        <el-button
          v-if="row.status === USER_STATUE.NO_ACTIVE.value"
          type="text"
          plain
          @click="onUpdateUserStatus(row, USER_STATUE.ENABLE)"
        >激活</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页区域 -->
  <el-pagination
    background
    size="small"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    v-model:current-page="params.pageNum"
    v-model:page-size="params.pageSize"
    :page-sizes="[5, 10, 15, 20]"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script setup>
  import { reactive, ref } from 'vue';
  import { getUserListService, updateStatusService } from '@/apis/cuser';
  import { PAGE_VALUE } from '@/constants/CRUDConstants'
  import { USER_STATUE } from '@/constants/userConstants'


  const params = reactive({
    pageNum: PAGE_VALUE.PAGE_NUM,
    pageSize: PAGE_VALUE.PAGE_SIZE,
    userId: '',
    nickName: '',
  })

  const userList = ref([])
  const total = ref(0)

  async function getUserList() {
    const ref = await getUserListService(params)
    userList.value = ref.rows
    total.value = ref.total
  }
  getUserList()

  function onSearch() {
    params.pageNum = 1
    getUserList()
  }

  function onReset() {
    params.pageNum = PAGE_VALUE.PAGE_NUM
    params.pageSize = PAGE_VALUE.PAGE_SIZE
    params.userId = ''
    params.nickName = ''
    getUserList()
  }

  let oldSize = PAGE_VALUE.PAGE_SIZE
  function handleSizeChange(newSize) {
    const curFirstNum = (params.pageNum - 1) * oldSize + 1 // 当前页面的第一个值在总数中的位置
    params.pageNum = Math.ceil(curFirstNum / newSize)
    oldSize = newSize
    console.log('true');

    getUserList()
  }

  function handleCurrentChange(newPage) {
    getUserList()
  }

  const updateStatusParams = reactive({
    userId: '',
    status: '',
  })

  async function onUpdateUserStatus(row, status) {
    const { value } = status
    const { userId } = row
    updateStatusParams.userId = userId
    updateStatusParams.status = value
    await updateStatusService(updateStatusParams)
    row.status = value
    // getUserList()
  }
</script>